<template>
  <div class="announcement-detail">
    <h1 style="font-size: large">{{ announcement.title }}</h1>
    <div class="info-item">
      <span class="label" >社团编号:</span>
      <span style="margin-right: 20px">{{ announcement.clubId }}</span>
      <span class="label">社团名称:</span>
      <span>{{ announcement.clubName }}</span>
    </div>
    <div class="info-item">
      <span class="label">公告状态:</span>
      <el-tag style="margin-right: 20px">
        {{ announcement.status }}
      </el-tag>
      <span class="label">发布日期:</span>
      <span>{{ formatDate(announcement.publishDate) }}</span>
    </div>
    <div class="announcement-content">
      <h2>公告正文:</h2>
      <p>{{ announcement.content }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage, ElTag } from "element-plus";
import moment from "moment";
import { useUserStore } from "../../../stores/user.ts";
import {
  ClubAnnouncementControllerService,
  ClubControllerService,
} from "../../../../generated";
import { useRoute } from "vue-router";

// 定义公告数据结构
interface AnnouncementInfo {
  id: number;
  clubId: number;
  clubName: string;
  title: string;
  content: string;
  publishDate: string;
  status: string;
}

// 模拟的公告数据，使用新的时间格式
const announcement = ref<AnnouncementInfo>({
  id: 0,
  clubId: 0,
  clubName: "",
  title: "",
  content: "",
  publishDate: "",
  status: "",
});

const store = useUserStore();
// 使用moment.js格式化日期
const formatDate = (date: string): string => {
  return moment(date, "YYYY-MM-DD HH:mm:ss").format("YYYY年MM月DD日 HH:mm:ss");
};

const loadData = async () => {
  const route = useRoute();
  const announcementIdStr = route.query.id as string;
  const announcementId = Number(announcementIdStr);
  try {
    const res =
      await ClubAnnouncementControllerService.getClubAnnouncementVoById(
        announcementId,
      );
    const clubRes = await ClubControllerService.getClubVoById(
      store.managedClubId,
    );
    if (res.code === 0 && clubRes.code === 0 && res.data && clubRes.data) {
      announcement.value = {
        id: res.data.id as number,
        clubId: res.data.clubId as number,
        clubName: clubRes.data.clubName as string,
        title: res.data.title as string,
        content: res.data.content as string,
        publishDate: res.data.createTime as string,
        status: res.data.isDelete as string,
      };
    } else {
      announcement.value = null; // 如果数据为空或格式不正确，设置为 null
      const errorStr =
        res.message === "success" ? clubRes.message : res.message;
      ElMessage.error("加载数据失败:" + errorStr);
    }
  } catch (error) {
    announcement.value = null; // 如果接口调用失败，设置为 null
    console.error("加载数据时发生错误:", error.message || error);
  }
};

onMounted(() => {
  loadData();
});
</script>

<style scoped>
.announcement-detail {
  margin-top: 20px;
}

.announcement-detail h1 {
  font-size: 26px !important;
  margin-bottom: 20px;
}

.info-item {
  margin-bottom: 10px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
}

.announcement-content {
  margin-top: 20px;
}

.announcement-content h2 {
  font-size: 20px !important;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .announcement-detail h1 {
    font-size: 22px;
  }

  .announcement-content h2 {
    font-size: 18px;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .info-value, .status-tag {
    margin-bottom: 5px;
  }
}
</style>
